<template>
  <div style="display:flex">
    <div class="center">
      <!-- 左侧 -->
      <div class="box-body-1">
        <!-- 票基本信息 -->
        <div class="box1">
          <div class="box1-top">
            <span class="sp1">
              <span>{{ trainsList.departureStation }}-----</span>
              <span>{{ trainsList.arrivalStation }}</span>
            </span>
            <div class="xzq">
              <!--  3、 4、
               6、高级软卧   9、商务座   M、一等座  P、特等座  --> 
              <span class="sp2">席位：<span>{{
                 trainsList.seatType=='0'? '无座'
                 :trainsList.seatType=='1'?'硬座'
                 :trainsList.seatType=='2'? '软座'
                 :trainsList.seatType=='3'? '硬卧'
                 :trainsList.seatType=='4'? '软卧'
                 :trainsList.seatType=='5'? '包厢硬座'
                 :trainsList.seatType=='6'? '高级软卧'
                 :trainsList.seatType=='7'? '一等软座'
                 :trainsList.seatType=='8'? '二等软座'
                 :trainsList.seatType=='9'? '商务座'
                 :trainsList.seatType=='A'? '高级动卧'
                 :trainsList.seatType=='E'? '特等软座'
                 :trainsList.seatType=='F'? '动卧'
                 :trainsList.seatType=='H'? '一人软包'
                 :trainsList.seatType=='I'? '一等卧'
                 :trainsList.seatType=='J'? '二等卧'
                 :trainsList.seatType=='M'? '一等座'
                 :trainsList.seatType=='O'? '二等座'
                 :trainsList.seatType=='P'? '特等座'
                 :trainsList.seatType=='Q'? '多功能座'
                 : '特等座'
                 }}</span></span>
              <!-- 席位 -->
            </div>
            <div>发车日期：{{trainsList.departureDate}}</div>
          </div>
          <div class="box1-body">
            <div class="body">
              <div>{{ trainsList.trainNumber }}</div>
              <!-- <div>城际</div> -->
            </div>
            <div class="body">
              <div>出发时间 →</div>
              <div>到达时间 →</div>
            </div>
            <div class="body">
              <div>{{ trainsList.departureTime }}</div>
              <div>{{ trainsList.arrivalTime }}</div>
            </div>
            <div class="body">
              <div>{{ trainsList.runTime }}</div>
            </div>
          </div>
        </div>
        <!-- 乘客信息 -->
        <div class="box2">
          <div class="box1">
            <div class="box1-top">
              <span class="sp1">乘车信息</span>
            </div>
            <!-- 乘客信息 -->
            <div class="ticket">
              <div class="CK-1">
                  <span style="margin-left: 20px">姓名: <span>{{ trainsList.passengerName }}</span></span>
                  <span style="margin-left: 20px">证件号：<span>{{ trainsList.idNumber }}</span></span>
                  <span style="margin-left: 20px">{{trainsList.ticketType=='adult'?'成人票' : '儿童票'}}</span>
                  <span style="margin:0 0 0 20px;">座位：{{ trainsList.trainBox }}{{trainsList.seatNo}}</span>
                  <span style="margin-left: 20px">席位：<span>{{
                  trainsList.seatType=='0'? '无座'
                 :trainsList.seatType=='1'?'硬座'
                 :trainsList.seatType=='2'? '软座'
                 :trainsList.seatType=='3'? '硬卧'
                 :trainsList.seatType=='4'? '软卧'
                 :trainsList.seatType=='5'? '包厢硬座'
                 :trainsList.seatType=='6'? '高级软卧'
                 :trainsList.seatType=='7'? '一等软座'
                 :trainsList.seatType=='8'? '二等软座'
                 :trainsList.seatType=='9'? '商务座'
                 :trainsList.seatType=='A'? '高级动卧'
                 :trainsList.seatType=='E'? '特等软座'
                 :trainsList.seatType=='F'? '动卧'
                 :trainsList.seatType=='H'? '一人软包'
                 :trainsList.seatType=='I'? '一等卧'
                 :trainsList.seatType=='J'? '二等卧'
                 :trainsList.seatType=='M'? '一等座'
                 :trainsList.seatType=='O'? '二等座'
                 :trainsList.seatType=='P'? '特等座'
                 :trainsList.seatType=='Q'? '多功能座'
                 : '特等座'
                 }}</span></span>
              </div>
            </div>
          </div>
        </div>
          <!-- 联系人信息 -->
        <div class="box3">
            <div class="box1">
              <div class="box1-top">
                <span class="sp1">联系人信息 </span>
              </div>
              <div class="body3">
                <span>姓名: <span>{{ trainsList.contactName }}</span></span>
                <!-- <span>手机号码: <span>{{ trainsList.linkPhone }}</span></span> -->
                <span class="TS">取票方式 <span>自取</span></span>
              </div>

            </div>
        </div>
          <!-- 订单 -->
        <div class="box3">
            <div class="box1">
              <div class="box1-top">
                <span class="sp1">支付</span>
              </div>
              <div style="display: flex" class="building1">
                <span style="font-size: 14px">支付订单号：</span>
                <span>{{ trainsList.orderId }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <!-- <span style="font-size: 14px">票单价:</span>
                <span class="xunaran">￥{{ trainsList.ticketTotalAmount }}</span> -->
                <span style="font-size: 14px">改签差价:</span>
                <span class="xunaran">￥{{ trainsList.changeAmount }}</span>
                <!-- <span style="font-size: 14px">会员的余额:</span>
                <span class="xunaran">111</span>            trainsList.depositAmount!=0 &&               -->
                <!-- 选择支付方式 -->
              </div>
              <div class="pay" style="margin:0 0 0 50px">
                <span>选择支付方式</span>
                <div class="block">
                  <span class="demonstration"></span>
                  <el-select v-model="shipvalue" size="mini" style="margin-right: 10px" placeholder="请选择" clearable>
                    <el-option v-for="item in shipList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="body5" v-show="yinhangka">
                <!-- 上 -->
                <!-- 中 -->
                <div class="building">
                  <span>已有银行卡</span>
                  <el-select
                    clearable
                    size="mini"
                    v-model="cardList.bankId"
                    @change="changeBankId"
                    @clear="changeBankId"
                    style="width: 140px"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in bankSelList"
                      :key="item.bankId"
                      :label="item.bankName"
                      :value="item.bankId"
                    >
                    </el-option>
                  </el-select>
                  <span>卡类型</span>
                  <el-select v-model="type" size="small" placeholder="请选择" clearable>
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </div>

                <!-- 下 -->
                <div style="display: flex" class="building">
                  <!-- <span style="font-size: 12px">曾用卡：</span>
                  <el-input
                    v-model="input"
                    placeholder="请输入内容"
                    style="width: 180px"
                    size="small"
                  ></el-input> -->
                  <span style="font-size: 12px">持卡人:</span>
                  <el-input v-model="cardList.cardholder" placeholder="请输入内容" style="width: 180px" size="small">
                  </el-input>
                  <span style="font-size: 12px">身份证:</span>
                  <el-input v-model="cardList.custCertificateNo" placeholder="请输入内容" style="width: 180px" size="small">
                  </el-input>
                </div>
                <div style="display: flex" class="building">
                  <span style="font-size: 12px">卡号:</span>
                  <el-input v-model="cardList.cardNumber" placeholder="请输入内容" style="width: 180px" size="small">
                  </el-input>
                  <span style="font-size: 12px">手机号:</span>
                  <el-input v-model="cardList.contractPhoneOne" placeholder="请输入内容" style="width: 180px" size="small">
                  </el-input>
                  <!-- <span v-if="this.type == 'creditcard'" style="font-size: 12px">银行编码:</span>
                  <el-input
                    v-if="this.type == 'creditcard'"
                    v-model="cardList.bankCode"
                    placeholder="请输入内容"
                    style="width: 180px"
                    size="small"
                  ></el-input> -->
                </div>
                <div style="display: flex" class="building" v-if="type =='creditcard'">
                  <span style="font-size: 12px">有效期：</span>
                  <el-date-picker size="small" v-model="cardList.creditCardTime" type="date" placeholder="选择日期">
                  </el-date-picker>
                  <span style="font-size: 12px">CVV:</span>
                  <el-input v-model="cardList.Cvv2" placeholder="请输入内容" style="width: 180px" size="small"></el-input>
                  <span style="font-size: 12px">交易备注:</span>
                  <el-input v-model="input" placeholder="请输入内容" style="width: 180px" size="small"></el-input>
                </div>
                <div class="building">
                  <el-button @click="getaddUsrBackCard" :loading="bankSaveLoadIng" :disabled="bankSaveLoadIng" type="primary">保存银行卡</el-button>
                </div>
              </div>
              <!-- gettainCodePay 二维码 -->
              <el-button type="primary" class="btn" v-if="isorderSuccess" @click="gopayaa">立即支付</el-button>
              <el-button type="primary" class="btn" v-if="!isorderSuccess" @click="goListmethod">返回</el-button>
            </div>
        </div>
      </div>
    </div>
      <!-- 右侧 -->
    <div class="right">
        <div class="right_1">
          <div style="margin: 0 0 20px 0">票价信息</div>
          <!-- <div class="right_3">
            <div>票单价</div>
            <div style="display: flex">
              <div>
                <div>
                  <p></p>
                </div>
              </div>
              <div>
                <span>{{ trainsList.ticketTotalAmount }}</span>
              </div>
            </div>
          </div> -->
          <div class="right_4">
            <div>改签差价</div>
            <div style="color: #ff9700">￥{{ trainsList.differencePrice }}</div>
          </div>
        </div>
        <div class="right_5">
          <div>温馨提示</div>
          <hr style="margin: 10px 0 10px 0" />
          <div style="font-size: 13px">
            1.成人退票时，如名下有儿童票需一同退票
            <br /><br />
            2.由于各铁路局相关政策，火车票源紧张等原因，没办法保证100%出票成功，
            请以收到短信为准。如果出票失败，所有票款会在3-7个工作日退回到您支付账户中
            ，请放心支付。<br /><br />
            3.自3月1日起，铁路对互联网购票实行实名信息验证，请您填写真实有效证件信息。
            如因证件信息未通过验证造成购票失败，敬请谅解。<br /><br />
            4.只支持二代身份证，儿童票先按成人票款，出票成功再返回。<br /><br />
            5.订单生成后，暂不支持改签，如果需要改签请拿身份证去窗口改签；如果需要取消请在发车4小时之前在网站提交。
          </div>
        </div>
    </div>
    <el-dialog title="支付" :visible.sync="centerDialogVisible" width="30%" center>
        <div class="index-body" v-if="qrcode">
          请将此二维码发给会员
          <div class="qrcode">
            <img :src="qrcode" alt="" />
            <!-- 这里的src的值就是生成的二维码的地址 -->
          </div>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="goListmethod">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import QRCode from "qrcode";
  export default {
    name: "trainReserve",
    data() {
      return {
        Usereserve: 0,
        orderId: "",
        merchantOrderId:"",
        setTimeoutFn:null,
        nVlist: "",
        shipList: [{
            value: "yinhangka",
            label: "银行卡",
          },
          {
            value: "erweima",
            label: "二维码",
          },
          // {
          //   value: "yuyin",
          //   label: "语音支付",
          // },
        ],
        shipvalue: "",
        bankSelList:[],
        yinhangka: false,
        erweima: false,
        yuyin: false,
        centerDialogVisible: false,
        payaList: {},
        input: "",
        customerId: "",
        isorderSuccess:true ,
        // 订单号
        train: "",
        type: "",
        bankSaveLoadIng:false,
        url: "", //识别二维码后跳转的地址或文本
        qrcode: "", //存储二维码图片的路径
        trainsLista: {},
        trainsList: {},
        trains: [],
        cardList: {
          bankId:"",
          custCertificateNo: "",
          contractPhoneOne: "",
          cardNumber: "",
          cardholder: "",
          creditCardTime: "",
          bankCode:"",
          Cvv2: "",
        },
        options: [{
            value: "creditcard",
            label: "信用卡",
          },
          {
            value: "debitcard",
            label: "借记卡",
          },
        ],
        // 支付方式
        payType: "",
        // 支付方式单选框
        radio: "1",
        label: "",
        value: "",
      };
    },
    props: {},
    components: {},

    watch: {
      // 监听配送方式
      shipvalue(nV, oV) {
        console.log(nV);
        this.nVlist = nV
        if (nV == "yinhangka") {
          this.yinhangka = true;
          this.erweima = false;
          this.yuyin = false;
          this.payType = nV;
          console.log(this.payType);
        } else if (nV == "erweima") {
          this.erweima = true;
          this.yinhangka = false;
          this.yuyin = false;
          this.payType = nV;
          // this.flightTicketList();
        } else if (nV == "yuyin") {
          this.showRetain = true;
          this.yinhangka = false;
          this.yuyin = false;
          this.payType = nV;
        }
      },
    },
    methods: {
      getaddUsrBackCard(){
        this.bankSaveLoadIng = true;
        let parma = {
          //用户id
          userId:this.trainsList.userId,
          // 银行卡类型
          cardType: this.type,
          // 姓名
          cardholder: this.cardList.cardholder,
          // 身份证号
          userCertificate: this.cardList.custCertificateNo,
          userType:"ZGJMSFZ",
          // 手机号
          reservePhone: this.cardList.contractPhoneOne,
          // 银行卡号
          cardNumber: this.cardList.cardNumber,
        }
        if( this.type == "creditcard") parma["CVV2"] = this.cardList.Cvv2
        if( this.type == "creditcard") parma["creditFailureDate"] = this.cardList.creditCardTime
        if( this.type == "creditcard") parma["bankCode"] = this.cardList.bankCode
        this.$axios.getBankCardById({
          cardNumber:parma.cardNumber
        }).then((res)=>{
          this.bankSaveLoadIng = false;
          if(res.code == "00000"){
            parma["bankId"] = res.data.id;
            parma["bankName"] = res.data.bankName;
            this.$axios.getaddUsrBackCard(parma).then((res)=>{
              if (res.code == "00000") {
                this.$message({
                  message: "新增成功",
                  type: "success",
                });
                this.getUsrBackCardList();
              }
            })
            
          }
          console.log(res)
        })
      },
      getUsrBackCardList(){
        this.$nextTick(()=>{
          this.$axios.getUsrBackCardList({userId: this.trainsList.userId}).then((res)=>{
            if(res.code == "00000"){
              this.bankSelList = [].concat(res.data) 
            }else{
              console.log("错误")
            }
          })
        })
      },
      changeBankId(val){
      this.cardList.bankId = val;
      let obj = {};
      if(val){
        obj = this.bankSelList.filter((item)=>{
          if(item.bankId == val) return item;
        })[0];
      }else{
        return
      }
      if(obj.cardholder) this.cardList.cardholder = obj.cardholder;
      else this.cardList.cardholder = "";
      if(obj.cardNumber) this.cardList.cardNumber = obj.cardNumber;
      else this.cardList.cardNumber = "";
      if(obj.cardType) this.type = obj.cardType;
      else this.type = "";
      if(obj.userCertificate) this.cardList.custCertificateNo = obj.userCertificate;
      else this.cardList.custCertificateNo = "";
      if(obj.reservePhone) this.cardList.contractPhoneOne = obj.reservePhone;
      else this.cardList.contractPhoneOne = "";
      if(obj.cvv2) this.cardList.Cvv2 = obj.cvv2;
      else this.cardList.Cvv2 = "";
      if(obj.creditFailureDate && obj.creditFailureDate != "请选择有效期") this.cardList.creditCardTime = obj.creditFailureDate;
      else this.cardList.creditCardTime = "";
      if(obj.bankCode) this.cardList.bankCode = obj.bankCode;
      else this.cardList.bankCode = "";
    },
      prompt() {
        this.$confirm('请选择支付方式', '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })
      },

      // 改签简略详情
      queryChangeDetails(){
        this.showLoading();
        this.$axios.queryChangeDetails({
          merchantOrderId:this.merchantOrderId
        }).then((res)=>{
          let resData = res.data
          if(res.code === "00000"){
            this.trainsList = res.data;
            if(res.data.isOrderSuccess=='yes'){
              this.postqueryTrainChangeOrder();
              this.closeLoading()
              if (resData.changeAmount == null) {
                this.trainsList.differencePrice = 0
              }else{
                this.trainsList.differencePrice = resData.changeAmount
              }
              if(resData.changeAmount <= 0 ){
                this.$axios.changeOutTicket({
                  orderid:resData.orderId,
                  merchantOrderId:this.merchantOrderId
                }).then((res)=>{
                  if(res.code == "00000" && res.data.success){
                    this.$message({
                      message: '改签成功',
                      type: 'success'
                    });
                    this.$router.push({
                      name: "trainOrder",
                    }); 
                  }else{
                    this.$message({
                      message: res.data.msg || res.msg ,
                    });
                    this.$router.push({
                      name: "trainOrder",
                    }); 
                  }
                })
              }
            }else if(res.data.isOrderSuccess=='err'){
              this.$message({
                message: '占座失败'
              });
              this.$router.push({
                name: "trainOrder",
              }); 
            }else{
              this.$message({
                  message: '正在占座'
              });
              this.setTimeoutFn = setTimeout(this.queryChangeDetails, 1000);
            }
          }
        })
      },
      // 订单详情
      postqueryTrainChangeOrder() {
        // console.log(this.label1);
        let orderId = this.orderId
        this.$axios.postqueryTrainChangeOrder({
          orderId,
        }).then((res) => {
            if (res.code == "00000") {
              this.trainsList.userId = res.data.userId;
              this.trainsList.contactName = res.data.contactName;
              if(!this.bankSelList.length)this.getUsrBackCardList();
            }
          });
        // } 
      },
      // 银行卡支付
      getbankCardPay() {
        let parma = {
          // 银行卡类型
          cardType: this.type,
          // 订单id
          orderId: this.orderId,
          merchantOrderId:this.merchantOrderId,
          // 姓名
          cardholder: this.cardList.cardholder,
          // 身份证号
          userCertificate: this.cardList.custCertificateNo,
          // 手机号
          reservePhone: this.cardList.contractPhoneOne,
          // 银行卡号
          cardNumber: this.cardList.cardNumber,
          orderSource:"crm"
        }
        if( this.type == "creditcard") parma["cvv2"] = this.cardList.Cvv2
        if( this.type == "creditcard") parma["creditFailureDate"] = this.cardList.creditCardTime
        if( this.type == "creditcard") parma["bankCode"] = this.cardList.bankCode
        this.$axios.getbankChangeCardPay(parma)
        .then((res) => {
          if(res.code == "00000" && res.data.code == '1'){
            this.$message({
              message: '改签成功',
              type: 'success'
            });
            this.$router.push({
              name: "trainOrder",
            }); 
          }else{
            this.$message({
              message: res.data.msg || res.msg ,
            });
          }
        });
      },
      // 正常订单银行卡语音支付
      getvoice() {
        this.$axios
          .getvoice({
            // 支付类型
            // type:this.type,
            payType: "Crm",
            // 支付金额
            // moneyAmout:this.trains.payAmount,
            // 订单id
            jsjOrderId: this.train,
            // 身份证号
            custCertificateNo: this.cardList.custCertificateNo,
            // 手机号
            contractPhoneOne: this.cardList.contractPhoneOne,
            // 银行卡号
            cardNumber: this.cardList.cardNumber,
            // 姓名
            cardholder: this.cardList.cardholder,
            // 信用卡到期时间
            // creditCardTime:this.cardList.creditCardTime,
            // Cvv2:this.cardList.Cvv2
          })
          .then((res) => {
            if (res.code == "200") {
              console.log(res.data);
            }
          });
      },
      // 二维码
      gettainCodePay() {
        // 改签支付订单
        this.$axios
          .gettrainRequestChangeQRCode({
            orderId:this.orderId,
            merchantOrderId:this.merchantOrderId
          })
          .then((res) => {
            if (res.code == "00000") {
              if (res.data.billQRCode) {
                this.url = res.data.billQRCode;
                QRCode.toDataURL(this.url, {
                    version: 7, //版本号
                    errorCorrectionLevel: "Q", //容错率,(建议选较低)更高的级别可以识别更模糊的二维码，但会降低二维码的容量
                    width: 280, //设置二维码图片大小
                    height: 280,
                  })
                  .then((url) => {
                    console.log(url); //这个url是二维码生成地址，也就是相当于图片地址
                    this.qrcode = url; //赋值给变量。用在img的src属性上
                  })
                  .catch((err) => {
                    console.error(err);
                  });
              } else {
                this.$message({
                  message: '改签成功',
                  type: 'success'
                });
              }
            } else {
              this.$confirm('未改签成功', '提示', {
                confirmButtonText: '确定',
                type: 'warning'
              })
            }
          });

      },
      goDetails() {
        this.centerDialogVisible = false,
          this.$router.push({
            name: "trainOrderDeta",
            params: {
              // orderNumber:this.trains.orderNumber,
              // customerId:this.customerId,
              orderId: this.orderId,
              type: 'paya'
            },
          });
      },
      gopayaa() {
        this.gopay()
      },
      goListmethod(){
        this.centerDialogVisible = false,
        this.$router.push({
          name: "trainOrder",
        });
      },
      //跳出
      closeLoading() {
        this.tableLoading.close();
      },
      //进入
      showLoading() {
        this.tableLoading = this.$loading({
          text: "拼命加载数据中", //显示在加载图标下方的加载文案
          spinner: "el-icon-loading", //自定义加载图标类名
          background: "rgba(0, 0, 0, 0.4)", //遮罩层颜色
          target: document.querySelector("#table"), //loadin覆盖的dom元素节点
        });
      },
      gopay() {
        console.log(this.payType)
        if (this.nVlist == '') {
          this.prompt()
        }
        if (this.payType == "yuyin" ) {
          if(this.trainsList.differencePrice >= '10'){
            this.getvoice()
          }else {
          this.$message({
            message: '差价金额小于10元不得使用语音支付',
            type: 'warning'
          });
        }
        } 
        if (this.payType == "yinhangka") {
          this.getbankCardPay()
        }
        if (this.payType == "erweima") {
          this.centerDialogVisible = true
          this.gettainCodePay()
        }
      },
    },
    mounted() {
      this.orderId = localStorage.getItem("orderId") || this.$route.params.orderId
      this.merchantOrderId = localStorage.getItem("merchantOrderId") || this.$route.params.merchantOrderId
      this.train = this.$route.params.train;
      this.customerId = this.$route.params.customerId;
      this.queryChangeDetails();
    },
    beforeDestroy(){
      clearTimeout(this.setTimeoutFn)
    }
  };
</script>

<style scoped>
  .body5 span {
    line-height: 32px;
    font-size: 12px;
    margin: 0px 10px;
  }

  .building {
    margin-top: 10px;
  }

  .building1 {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .btn {
    margin: 50px;
    float: right;
  }

  .right {
    margin-top: 36px;
    margin-left: 20px;
    width: 20%;
  }

  .right_1 {
    padding: 20px;
  }

  .right_3 {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-top: 10px;
  }

  .right_4 {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }

  .right_5 {
    margin-top: 20px;
    background-color: #f8fbfe;
    width: 100%;
    height: 400px;
    padding: 20px;
  }

  .body5 {
    padding: 10px;
  }

  .CK-1 {
    display: flex;
    margin: 10px 0px;
  }

  .CK-2 {
    display: flex;
    margin: 10px 0px;
  }

  .box-body-2 {
    width: 300px;
    margin-top: 20px;
    margin-left: 20px;
  }

  .top {
    border-radius: 10px;
    border: 1px solid #ffd5a1;
    padding: 0 10px;
    background-color: #fffaed;
  }

  .center {
    padding: 30px;
    width: 1200px;
    margin: auto;
    display: flex;
  }

  .box1 {
    border: 1px solid #ccddee;
    margin-top: 14px;
  }

  .Fy {
    width: 238px;
    border-bottom: 1px solid #ffd5a1;
    padding: 5px 0;
  }

  .Fy>div {
    width: 100%;
    line-height: 24px;
  }

  .Fy>div .d1 {
    float: left;
  }

  .Fy>div .d2 {
    margin-left: 10px;
  }

  .sp1 {
    float: left;
    line-height: 39px;
    font-size: 18px;
    font-weight: 500;
  }

  .xzq {
    float: left;
    line-height: 39px;
    font-size: 12px;
    margin-left: 39px;
  }

  .box1-top {

    background-color: #edf8ff;
    height: 39px;
    line-height: 39px;
    padding: 10px 12px;
  }

  .box1-top>span {
    line-height: 41px;
  }

  .xgcc {
    float: right;
    color: #0069ca;
  }

  .box1-body {
    width: 100%;
    /* width: 730px; */
    padding: 10px 0;
    display: flex;
  }

  .body {
    width: 145px;
    margin-left: 50px;
    font-size: 14px;
  }

  .body div {
    line-height: 25px;
    font-size: 16px;
  }

  .body2 {
    padding: 0px 10px;
  }

  .body2 p {
    line-height: 40px;
    margin-left: 10px;
  }

  .ticket {
    /* display: flex; */
    padding: 10px;
  }

  .body3 {
    padding-top: 20px;
    padding-bottom: 10px;
    display: flex;
  }

  .body3 span {
    margin: 10px;
  }

  .TS {
    color: #717171;
    padding-left: 100px;
  }

  .CK {
    padding: 0px 0;
    border-bottom: 1px solid #e5e5e5;
    /* height: 100px; */
    line-height: 24px;
    display:inline-block;
  }

  .xunaran {
    width: 150px;
  }


  .box-body-1 {
    width: 100%;
  }
</style>